<template>
  <div>
    <a-layout id="components-layout-demo-fixed-sider" style="min-height: 100vh">
      <f-sider></f-sider>
      <a-layout>
        <f-header></f-header>
        <a-layout-content
          :style="{ margin: '24px 16px 0', overflow: 'initial' }"
        >
          <div :style="{ padding: '24px', background: '#fff' }">
            <a-row type="flex" justify="space-between">
              <a-col>
                <div class="title">会员管理</div>
              </a-col>
            </a-row>
            <a-table
              :columns="columns"
              :rowKey="(data) => data.user_id"
              :dataSource="data"
              :pagination="pagination"
            >
              <template slot="avatarUrl" slot-scope="data">
                <img class="avatarUrl" :src="data.avatarUrl" />
              </template>
              <template slot="gender" slot-scope="data">
                <span>{{
                  data.gender == 1 ? "男" : data.gender == 2 ? "女" : "未知"
                }}</span>
              </template>
            </a-table>
          </div>
        </a-layout-content>
        <f-footer></f-footer>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import sider from "../../components/layout/Sider.vue";
import header from "../../components/layout/Header.vue";
import footer from "../../components/layout/Footer.vue";
const columns = [
  {
    title: "ID",
    dataIndex: "user_id",
  },
  {
    title: "呢称",
    dataIndex: "nickName",
  },
  {
    title: "微信头像",
    scopedSlots: { customRender: "avatarUrl" },
  },
  {
    title: "性别",
    scopedSlots: { customRender: "gender" },
  },
  {
    title: "国家",
    dataIndex: "country",
  },
  {
    title: "省份",
    dataIndex: "province",
  },
  {
    title: "城市",
    dataIndex: "city",
  },
  {
    title: "用户余额",
    dataIndex: "balance",
  },
  {
    title: "实际消费",
    dataIndex: "monetary",
  },
  {
    title: "用户积分",
    dataIndex: "integral",
  },
  {
    title: "注册时间",
    dataIndex: "create_time",
  },
];

const data = [];
export default {
  metaInfo: {
    title: "会员管理",
  },
  data() {
    return {
      data,
      columns,
      page: 1,
      pageSize: 10,
      issearch: false,
      pagination: {
        defaultPageSize: 10,
        total: 0,
        showTotal: (total) => `共 ${total} 条数据`,
        onChange: (page, pageSize) => this.changePage(page, pageSize), //点击页码事件
      },
    };
  },
  components: {
    "f-header": header,
    "f-sider": sider,
    "f-footer": footer,
  },
  mounted() {
    this.$parent.tokenverify();
    this.getlst();
    this.setsiders();
  },
  methods: {
    getlst() {
      const url = "/Admin/User/getUserList";
      const paramObj = {
        page: this.page,
        pageSize: this.pageSize,
        token: localStorage.getItem("token"),
      };
      this.$server.sl("GET", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.data = res.data;
          this.pagination.total = res.count;
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("获取失败，请刷新重试");
        }
      });
    },
    //翻页
    changePage: function (page, pageSize) {
      this.page = page;
      this.pageSize = pageSize;
      if (this.issearch) {
        this.onSearch();
      } else {
        this.getlst();
      }
    },
    //菜单选中设置
    setsiders() {
      this.$store.commit("updateselectedKeys", "6");
    },
  },
};
</script>
<style scoped>
#components-layout-demo-fixed-sider .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
.title {
  margin: 0 0 10px;
  font-size: 20px;
}
.avatarUrl {
  height: 40px;
  width: 40px;
  border-radius: 40px;
}
.operation:first-child {
  margin-right: 1rem;
}
</style>